<template>
  <div class="page-documents-list">
    <div class="companys">
      <div class="title">
        <div class="l-title">文件夹列表</div>
        <div class="r-title">
          空间容量：<span style="color:#2bcb2b;margin-right:15px">{{spceInfo.fileSpaceSize}}M</span>
          剩余：<span style="color:#fd6057;">{{spceInfo.fileSpaceSurplusSize}}M</span>
          <!-- <span style="margin-left:10px" v-if="!spceInfo.financeDeductSpaceSize">凭证附件已使用：<span style="color:#fd6057;">{{spceInfo.financeDeductSpaceSize}}M</span></span> -->
          <span @click="open" style="margin-left:10px;cursor: pointer;">文档管理需知 </span>
          <i @click="open" style="color:#FF3B30;font-size: 12px;cursor: pointer;" class="iconfont">&#xe639;</i>
        </div>
      </div>
      <div class="list">
        <el-tree highlight-current :default-expanded-keys="[treeData[0] ? treeData[0].subid : '']" node-key="subid" :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick"></el-tree>
      </div>
    </div>
    <div class="files">
      <div class="files-search">
        <div class="form">
          <div class="block">
            <el-input v-model="params.keyWord" placeholder="请输入文件名称"></el-input>
          </div>
          <div class="block">
            <el-select filterable v-model="params.userIdList" collapse-tags multiple placeholder="请选择员工">
              <el-option v-for="item in userList" :key="item.userid" :label="item.realName" :value="item.userid"></el-option>
            </el-select>
          </div>
          <div class="block">
            <el-date-picker v-model="dateValue" value-format="yyyy-MM-dd" @change="datePickerChange" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
          </div>
          <div class="block">
            <el-button @click="getFilePageList" type="primary">搜索</el-button>
          </div>
        </div>
        <el-dropdown @command="dropClick">
          <el-button type="primary">新增文档<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="1">新增文档</el-dropdown-item>
            <el-dropdown-item :command="2">批量新增</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div v-loading="loading" class="table">
        <el-table height="100%" :data="tableData" style="width: 100%">
          <el-table-column align="center" prop="fileName" label="文件名称">
            <template #default="{row}">
              <div class="spac" @click="oper(row, 2)">{{row.fileNickname}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="fileSuffix" label="文件类型"></el-table-column>
          <el-table-column align="center" prop="realName" label="创建人"></el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
          <el-table-column align="center" label="操作">
            <template #default="{ row }">
              <div class="oper">
                <span class="iconfont" @click="oper(row, 2)" title="查看">&#xe66f;</span>
                <span class="iconfont" @click="oper(row, 3)" title="下载">&#xe670;</span>
                <!-- <span class="iconfont" @click="oper(row, 1)" title="浏览记录">&#xe66e;</span> -->
                <span class="el-icon-edit" @click="oper(row, 5)" title="编辑"></span>
                <span class="iconfont" @click="oper(row, 4)" title="删除">&#xe66d;</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageIndex" :page-sizes="[50, 100, 300, 400]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
    <el-dialog title="输入密码" :visible.sync="pwdDialog" width="30%">
      <el-input v-model="postData.sharePwd"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pwdDialog = false">取 消</el-button>
        <el-button type="primary" @click="getDocData">确 定</el-button>
      </span>
    </el-dialog>
    <add-document :isDrawer.sync="isDrawer" :command="command" :subId="params.dataId" :editParams="editParams" @confirm="getFilePageList"></add-document>
    <look-history :isDrawer.sync="isLookDrawer"></look-history>
  </div>
</template>

<script>
import AddDocument from './AddDocument.vue';
import LookHistory from './LookHistory.vue';


export default {
  components: { AddDocument, LookHistory },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateValue: [],

      command: 1, // 1新增 2批量新增
      isDrawer: false, //新增抽屉
      isLookDrawer: false, //浏览记录抽屉

      treeData: [],
      defaultProps: {
        children: 'subList',
        label: 'subName'
      },

      userList: [], //用户列表 下拉框
      params: {
        pageIndex: 1,
        pageSize: 10,
        keyWord: '',
        userIdList: [],
        dataId: [],
        queryBeginTime: '',
        queryEndTime: ''
      },
      total: 0,

      tableData: [],
      loading: false,

      postData: {}, // 查看 下载文档的请求参数
      pwdDialog: false, // 密码输入框

      editParams: {}, //编辑参数
      spceInfo: {}, //空间信息
      notify: true,

    };
  },
  mounted() {
    this.initData();
    this.getStructureSubCompanyTree();
    this.getFilePageList();
  },
  methods: {
    open() {
      if (this.notify) {
        this.notify = false;
        this.$notify({
          message: '文档管理模块需知:一个企业号下能使用免费容量为1GB(1024M),如需开通更多容量,请联系： 010-89648111;（500元/10GB/年，10GB起购）。',
          offset: 20
        });
        setTimeout(() => {
          this.notify = true;
        }, 7000);
      }
    },
    async initData() {
      const { data } = await this.$api.documentManage.GetSelectUserInfo();
      const { data: data1 } = await this.$api.documentManage.GetSpaceInfo();
      this.spceInfo = data1.data;
      this.userList = data.data;
      console.log(this.spceInfo);
    },
    datePickerChange(e) { //日期
      const [queryBeginTime, queryEndTime] = e;
      this.params = Object.assign({}, this.params, { queryBeginTime: queryBeginTime + ' 00:00:00', queryEndTime: queryEndTime + ' 23:59:59' });
    },
    handleSizeChange(val) { //分页
      this.params.pageSize = val;
      this.getFilePageList();
    },
    handleCurrentChange(val) {//分页
      this.params.pageIndex = val;
      this.getFilePageList();
    },
    handleNodeClick(item) { //树节点点击
      const { subid } = item;
      this.params.dataId = typeof subid === 'string' ? [subid] : subid;
      this.getFilePageList();
    },
    async getFilePageList() { //文档列表
      this.loading = true;
      const { data } = await this.$api.documentManage.GetFilePageList(this.params).catch(() => {
        this.loading = false;
      });
      this.loading = false;
      if (data.status === 204) {
        this.tableData = [], this.total = 0;
        return;
      }
      if (data.status === 200) {
        const { items, totalCount } = data.data;
        this.tableData = items, this.total = totalCount;
      }
    },
    async getStructureSubCompanyTree() { //公司树
      const { data } = await this.$api.documentManage.GetSubCompanyTree();
      this.treeData = [{ subName: '全部文件', subid: data.data.subIdList, subList: data.data.dataList }];
    },
    async getDocData() { //查看 下载 文档
      const { data } = await this.$api.documentManage.GetDocData(this.postData);
      this.pwdDialog = false;
      window.open(data.data.fileUrl);
    },
    async oper(item, type) { // 1浏览记录  2查看  3下载  4删除
      const { documentid, authType, docAuthId, fileId } = item;
      this.isLookDrawer = type === 1;
      if (type === 2 || type === 3) {
        // authType：权限类型(0:所有 1:按匹配密码 2:按人员 3:按部门 4:不共享)
        this.postData = { documentId: documentid, authType, operateType: type - 1, docAuthId, fileId };
        if (authType == 1) return this.pwdDialog = true;
        this.getDocData();
      }
      if (type === 4) {
        await this.$confirm(`即将删除该文档, 是否继续?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' });
        await this.$api.documentManage.DeleteDocument([{ documentid }]);
        this.getFilePageList();
      }
      if (type === 5) {
        this.editParams = { documentId: documentid, fileId };
        this.command = 3;
        this.isDrawer = true;
      }
    },
    dropClick(command) { //command 1新增文档  2批量新增
      if (!this.params.dataId.length || this.params.dataId.length > 1) return this.$message({ type: 'warning', message: '请在左侧选择上传文件夹' });
      this.command = command;
      this.isDrawer = true;
    },
  }
};
</script>

<style lang="less" scoped>
.page-documents-list {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 16px;
  .companys {
    flex: 1;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    .title {
      background: #f5f8fd;
      padding: 8px;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .l-title {
        font-size: 16px;
      }
      .r-title {
        font-size: 12px;
      }
    }
    .list {
      padding: 10px;
      flex: 1;
      overflow: auto;
    }
  }
  .files {
    flex: 2;
    display: flex;
    flex-direction: column;
    &-search {
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .form {
        display: flex;
        .block {
          display: flex;
          align-items: center;
          padding: 0 10px;
          .el-date-picker {
            border: none !important;
            border-bottom: 1px solid #dcdfe6 !important;
          }
          .el-date-editor {
            border: none !important;
            border-bottom: 1px solid #dcdfe6 !important;
          }
          &:nth-child(1) {
            padding-left: 0;
          }
          &:nth-last-child(1) {
            padding-right: 0;
          }
        }
      }
    }
    .table {
      overflow: hidden;
      flex: 1;
      border: 1px solid #ccc;
      border-bottom: none;
      .spac {
        text-decoration: underline;
        color: #62b3e8;
        cursor: pointer;
      }
      .oper {
        span {
          margin: 0 5px;
          display: inline-block;
          cursor: pointer;
        }
        span:hover {
          color: #62b3e8;
        }
      }
    }
    .pagination {
      border: 1px solid #ccc;
      text-align: right;
      border-top: none;
    }
  }
}
</style>
